<template>
  <div class="app-container">
<div class="line"></div>

<el-menu
  :default-active="activeIndex2"
  class="el-menu-demo"
  mode="horizontal"
  @select="handleSelect"
  background-color="#545c64"
  text-color="#fff"
  active-text-color="#ffd04b">
  <el-menu-item index="all"  >全部书籍</el-menu-item>
  <el-submenu index="2">
    <template slot="title">分类</template>
    <el-menu-item index="悬疑">悬疑</el-menu-item>
    <el-menu-item index="科幻">科幻</el-menu-item>
    <el-menu-item index="应用文学">应用文学</el-menu-item>

    </el-submenu>
  </el-submenu>
  <el-menu-item index="3" disabled>消息中心</el-menu-item>


  <div style="margin-top: 50px; margin-left: 20px;  width: 400px; float:right ">
    <el-input placeholder="请输入搜索内容" v-model="selectAnyData" class="input-with-select">
      <el-button slot="append" icon="el-icon-search"  @click="selectAny()"></el-button>
    </el-input>
  </div>

</el-menu>


<div class="billboard" style="float: right;
   width: 200px;
   height: 500px;">
     <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>阅读榜单：</span>
         
        </div>
        <div v-for="(value, key, index) in tableData" style=""
            :key="key"
            :offset="index > 0 ? 4 : 0" class="text item">
          {{value.bookName}}
        </div>
      </el-card>
</div>

       <el-row>
          <el-col
            style="width: 200px; margin-left: 20px"
            :span="8"
            v-for="(value, key, index) in bookList"
            
            :key="key"
            :offset="index > 0 ? 4 : 0"
          >
            <el-card :body-style="{ padding: '0px' }">
            <router-link :to ="'/books/homrtodetails/' + value.id">
              <img  :src='value.image' class="image">
            </router-link>
              <div style="padding: 14px;">
              <el-tag>{{value.bookName}}</el-tag>
              <el-tag type="success">{{ value.bookType }}</el-tag>
                <div class="bottom clearfix">
                <span>作者 :</span>
                  <time class="author">{{ value.author }}</time>
                  <br>
                  <router-link :to="'/bookInfo/'+ value.id ">
                  <el-button type="text" class="button">点击阅读</el-button>
                  </router-link>
                  <el-button type="text" class="button"  @click="addToBookshelf(value.id)">加入书架</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
 
  </div>
 
</template>
 <style>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }
</style>
<script>
import echarts from "echarts";
import staApi from "@/api/sta";
import booksShowApi from "@/api/booksShowApi";
export default {
  data() {
    return {
        selectAnyData:'',
        tableData:{},
        activeIndex: '1',
        activeIndex2: '1',
        bookList:{}

    };
  },
  mounted() {
       this.getbooksInfo();
       this.getbillborad();
    },
  methods: {
       selectAny(){
        booksShowApi.selectAny(this.selectAnyData).then((response) => {
        console.log(response);
        this.bookList = response.data.list;
        console.log(this.bookList);
      })
       },
       getbillborad(){
        booksShowApi.getbillborad().then((response) => {
        this.tableData = response.data.list;
        console.log(this.tableData);
      })

       },

       
        addToBookshelf(bookId){       
        booksShowApi.addToBookshelf(bookId).then((response) => {
              this.$message({
              type: "success",
              message: "已成功加入到书架!",
            });
      })
      },
      handleSelect(key, keyPath) {
        if(key=="all"){
          this.getbooksInfo();
        }else{
          console.log(key, keyPath);
          this.getbooksInfoByType(key);}
        
      },
        getbooksInfoByType(bookType){
         
        booksShowApi.getbooksInfoByType(bookType).then((response) => {
        console.log(response);
        this.bookList = response.data.list;
        console.log(this.bookList);
      })
      },

      getbooksInfo(){
        booksShowApi.getBookList().then((response) => {
        console.log(response);
        this.bookList = response.data.list;
        console.log(this.bookList);
      })
      }

  },
};

</script>
<style scoped>

.image {
  width: 100%;
  height: 200px;
  display: block;
}
.billboard{

}
  .el-select .el-input {
    width: 130px;
    
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

</style>